<template>
  <div id="buildingmanage" style= "height:100%;width:100%;padding: 0;background-image: linear-gradient(to right top, #a1d1ff, #c2daff, #dce5ff, #f0f1ff, #ffffff);">
    <div class="searchwrapper">
      <div style="width: 200px"></div>
      <p>楼栋名称</p>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="buildingName"
          style="width: 200px;margin-right: 100px"
      >

        </el-input>
      <el-button style="margin-left: 20px" type="primary" icon="el-icon-search" @click="searchBuildingByName">搜索</el-button>
      <el-button style="margin-left: 50px"  type="primary"  icon="el-icon-circle-plus-outline"   size="small" @click="showAddDialog">添加楼栋</el-button>
      <div style="width: 500px"></div>
    </div>
    <div id="table" style="margin-left: 50px;margin-right: 50px">
      <el-table
          :data="buildingList"
          style="width: 90%">
        <el-table-column
            prop="building.name"
            label="名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="areaName"
            label="所在园区">
        </el-table-column>
        <el-table-column
            prop="building.maxFloor"
            label="最大层数">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showBuilding(scope.row)">编辑</el-button>
            <el-button style="color: red" type="text" size="small" @click="building_delete(scope.row)">删除</el-button>
            <el-button  type="text" size="small" @click="showTotalNum(scope.row)">查看住宿人数</el-button>
            <el-button  type="text" size="small" @click="allocateOne(scope.row)">单层设置</el-button>
            <el-button  type="text" size="small" @click="allocateMany(scope.row)">批量设置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[2,5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
      <building-edit-dialog @ok="searchBuildingByName" ref="BuildingEditDialog"></building-edit-dialog>
      <building-add-dialog @ok="searchBuildingByName" ref="BuildingAddDiglog"></building-add-dialog>
      <el-dialog
          title="批量设置楼栋"
          :visible.sync="dialogVisible"
          width="30%">
        <span>
          <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="所属园区">
      <el-input v-model="form.area.name" disabled ></el-input>
    </el-form-item><el-form-item label="楼栋名称" disabled>
      <el-input v-model="form.building.name" disabled></el-input>
    </el-form-item>
 <el-form-item  label="开始楼层">
    <el-select v-model="form.startFloor" placeholder="">
      <el-option v-for="(floor,idx) in floorList" :key="idx" :label="floor" :value="floor"></el-option>
    </el-select>
  </el-form-item>
             <el-form-item label="结束楼层" >
    <el-select v-model="form.endFloor" placeholder="">
      <el-option v-for="(floor,idx) in floorList" :key="idx" :label="floor" :value="floor"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  _searchBuildingByName,
  _buildingDelete,
  _getTotalPeopleByBuildingID,
  _selectAreaByAreaID, _allocateRoomsInManyFloors
} from '../../../api/super_admin'
import buildingEditDialog from '../components/editComponents/BuildingEditDialog.vue'
import buildingAddDialog from '../components/addComponents/BuildingAddDialog.vue'
export default {
  name: 'BuildingManage',
  components: {
    buildingEditDialog,
    buildingAddDialog
  },
  created () {
    this.getFirstBuilding()
  },
  data () {
    return {
      ID: 10,
      buildingList: [
      ],
      areaList: [],
      buildingName: '',
      preBuildingName: '',
      total: 0,
      pageNo: 1,
      pageSize: 5,
      dialogVisible: false,
      form: {
        building: {},
        area: {},
        startFloor: 1,
        endFloor: 12
      },
      floorList: []
    }
  },
  methods: {
    getFirstBuilding () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: 1,
        data: {
          buildingName: this.preBuildingName
        }
      }
      _searchBuildingByName(DOT).then(res => {
        if (res.status) {
          this.buildingList = res.data
          this.pageNo = 1
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    getBuilding () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        data: {
          buildingName: this.preBuildingName
        }
      }
      _searchBuildingByName(DOT).then(res => {
        if (res.status) {
          this.buildingList = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    searchBuildingByName () {
      this.preBuildingName = this.buildingName
      this.getFirstBuilding()
    },
    handleCurrentChange (value) {
      this.pageNo = value
      this.getBuilding()
    },
    handleSizeChange (value) {
      this.pageSize = value
      this.getFirstBuilding()
    },
    building_delete (row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _buildingDelete(row.building.id).then(res => {
          if (res.status) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getFirstBuilding()
          } else {
            this.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      }).catch()
    },
    showBuilding (val) {
      this.$refs.BuildingEditDialog.show(val.building)
    },
    showAddDialog () {
      this.$refs.BuildingAddDiglog.show()
    },
    showTotalNum (val) {
      _getTotalPeopleByBuildingID(val.building.id).then(res => {
        if (res.status) {
          this.$confirm('楼栋' + val.building.name + '共居住了' + res.data + '人', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then().catch()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    allocateOne (val) {
      this.$router.push({name: 'allocateone',
        params: {
          building: val.building
        }})
    },
    allocateMany (val) {
      this.form.building = val.building
      this.form.endFloor = val.building.maxFloor
      // console.log(this.form.building)
      this.dialogVisible = true
      for (let i = 1; i <= val.building.maxFloor; i++) {
        this.floorList.push(i)
      }
      // console.log(this.floorList)
      _selectAreaByAreaID(val.building.area).then(res => {
        if (res.status) {
          this.form.area = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      // console.log(this.form)
    },
    submit () {
      if (this.endFloor < this.startFloor) {
        this.$message({
          messsge: '结束楼层不能大于开始楼层',
          type: 'error'
        })
      } else {
        this.$confirm('此操作将改变房间分布, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _allocateRoomsInManyFloors(this.form.startFloor, this.form.endFloor, this.form.building.id).then(res => {
            if (res.status) {
              this.$message({
                message: '批量分配成功',
                type: 'success'
              })
              this.dialogVisible = false
            } else {
              this.$message({
                message: '批量分配失败',
                type: 'error'
              })
            }
          })
        }).catch()
      }
    }
  }
}
</script>
<style scoped>
.searchwrapper {
  margin-top: 10px;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}
.searchwrapper p {
  margin-left: 200px;
  margin-right: 10px; /* 调整 p 标签与 el-input 之间的间距 */
  font-weight: bold; /* 可选：设置 p 标签的字体加粗 */
}

.searchwrapper .el-input {
  flex: 1; /* el-input 自动填充剩余空间 */
}

</style>
